<template>
    <div class="fromItem">
        <div>
            <el-row :gutter="5">
                <el-col :span="6">
                    <el-input v-model="formitem.key" @input="change('key')" placeholder="参数名"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-select style="width: 100%;" :class="theme" @change="change('type')"
                        :popper-class="theme + ' api-state-change-option'" placeholder="请选择" v-model="formitem.type">
                        <el-option v-for="item in typeOptions" :class="theme" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="12">
                    <div v-if="formitem.type == 'text'">
                        <el-input placeholder="参数值" @input="change('value')" v-model="formitem.value"></el-input>
                    </div>
                    <div v-if="formitem.type == 'file'" class="fileValue">
                        <div class="fileValueUrl">{{formitem.value}}</div>
                        <el-button size="mini" @click="chooseFile(formitem)" round class="fileValueButton"
                            style="float: right;">
                            选择文件</el-button>
                    </div>
                </el-col>
                <el-col :span="2" class="deleteItem">
                    <el-button type="danger" size="mini" @click="deleteItem" circle icon="el-icon-delete"></el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
    import { mapState } from 'vuex';
    export default {
        props: ['formitem', 'changeEvent', 'index', 'deleteEvent'],
        data() {
            return {
                typeOptions: [
                    { label: 'text', value: 'text' },
                    { label: 'file', value: 'file' }
                ],
            }
        },
        computed: {
            ...mapState("theme", {
                theme: state => state.theme,
            }),
        },
        methods: {
            change(type) {
                if (type == 'type') {
                    this.formitem.value = '';
                };
                this.changeEvent(this.index);
            },
            deleteItem() {
                this.deleteEvent(this.index);
            },
            chooseFile(item) {
                if (window.ClientApi) {
                    window.ClientApi.tools.chromeFile((file, name) => {
                        item.value = file;
                        this.changeEvent(this.index);
                    });
                };
            },
        },
    };
</script>
<style>
    .deleteItem {
        height: 40px;
        line-height: 38px;
        text-align: center;
    }

    .fileValue {

        position: relative;
        line-height: 40px;
    }

    .fileValueUrl {
        padding: 0 10px;
        border: 1px solid #DCDFE6;
        height: 38px;
        line-height: 38px;
        position: absolute;
        left: 0px;
        color: #606266;
        border-radius: 4px;
        right: 100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    .fromItem {
        padding: 5px;
        border-bottom: 1px solid #DCDFE6;
    }

    .fileValueButton {
        margin: 7px 0 0 0;
    }
</style>